<template>
<div class="aaaa">
  <mu-dialog :open="dialog" :title="user.user_name + '的资料信息'" @close="close">
    <div class="user-message-box">
      <mu-paper>
        <div class="head-box">
          <mu-avatar :size="90" :src="user.user_thumbnail"/>
          <span>头像</span>
        </div>        
        <mu-divider/>
        <mu-text-field hintText="用户名" class="divider-form" :underlineShow="false" v-model="user.user_name" />
        <mu-divider/>
        <mu-text-field hintText="微信昵称" class="divider-form" :underlineShow="false" v-model="user.user_nickname"/>
        <mu-divider/>
        <mu-select-field hintText="性别" v-model="user.user_sex" fullWidth class="divider-sex divider-form"  :underlineShow="false" >
          <mu-menu-item value="1" title="男"/>
          <mu-menu-item value="2" title="女"/>
        </mu-select-field>
        <mu-divider/>
        <mu-text-field v-model="user.user_password" hintText="密码"disabled class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user.user_wechat_id" hintText="微信号" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user.user_mobile_phone" hintText="手机号" type="tel" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user.user_province" hintText="省" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user.user_city" hintText="城市" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user.user_money" type="number" hintText="金币" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <mu-text-field v-model="user.user_rank" type="number" hintText="等级" class="divider-form" :underlineShow="false" />
        <mu-divider/>
        <div class="switch-box">
          <mu-switch label="私信" labelLeft v-model="allowChat"/>
        </div>
        <mu-divider/>
        <mu-raised-button label="修改" class="button" @click="updateUser" />
      </mu-paper>
      </div>
    <mu-flat-button slot="actions" @click="close" primary label="取消"/>
    <mu-flat-button slot="actions" primary @click="close" label="确定"/>
  </mu-dialog>


   <mu-row gutter class="user-box">
    <mu-col desktop="10">
      <mu-avatar :size="90" :src="user.user_thumbnail"/>
    </mu-col>
    <mu-col desktop="20">
      <div class="user user-name">{{user.user_name}}</div>
      <div class="user">
        <span>微信昵称：{{user.user_nickname}}</span><br/>
        <span>微信号：{{user.user_wechat_id}}</span>
      </div>
    </mu-col>
    <mu-col desktop="35">
      <div class="user-btn">
        <mu-raised-button label="资料信息" @click="open" class="bd-radius" backgroundColor="#303f9f"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <mu-raised-button label="封号" @click="banUser()" :disabled="user.user_status == 0" class="bd-radius" secondary/>
        <mu-raised-button label="解封" @click="banUser()" :disabled="user.user_status == 1" class="bd-radius" backgroundColor="#4BAF4F"/>
      </div>
    </mu-col>
    <mu-col desktop="35">
      <button @click="changePageNumber()">changePageNumber</button>
    </mu-col>
  </mu-row>

  <check-bar :checkboxStatus.sync="chooseStatus" :isShow="isShow" :pageNumber.sync="pageNumber" :refreshFunction="getPictures":data.sync="pictures"  :page.sync="page"></check-bar>

  <mu-row gutter class="picture-list-box">
    <mu-col desktop="100">
      <grid-list :list="pictures" :chooseStatus="chooseStatus"></grid-list>
    </mu-col>
  </mu-row>

  <check-bar :checkboxStatus.sync="chooseStatus" :isShow="isShow" :pageNumber.sync="pageNumber" :refreshFunction="getPictures":data.sync="pictures" :page.sync="page"></check-bar>
</div>
</template>
<script>
import checkBar from '../../components/check-bar.vue'
  import gridList from '../../components/grid-list.vue'
  import http from "../../http/http.js" 
  export default {
    data () {
      return {
        chooseStatus:false,//是否选中所有违背屏蔽的图片
        pageNumber:4,//每页显示多少个
        page:1,//第几页
        isShow:false, //控制check-bar上的刷新状态图标是否显示

        getUserUrl:this.config.userUrl,
        getPicturesUrl:this.config.getPicturesUrl,
        banUserUrl:this.config.banUserUrl,
        updateUserUrl:this.config.userUrl,
        user:[],
        pictures:[],

        dialog: false,//控制弹窗
        allowChat:false,
      }
    },
    components : {
      checkBar,
      gridList,
    },
    methods: {
      changePageNumber:function(){
        console.log(this.user.user_status)
      },
      //弹窗
      open () {
        this.dialog = true
      },
      //关闭弹窗
      close () {
        this.dialog = false
      },


      //是否屏蔽所有图片
      chooseAll: function(){
        console.log(!this.chooseStatus);
      },
      // 获取用户图片
      getPictures:function(){
        var user_id =  this.$route.params.id
        var that = this
        // 获取用户信息
        http.get(that.getUserUrl,{
          params: {
            user_id:user_id
          }        
        })
        .then(function(response){
          that.user = response.data;
          if(that.user.user_allow_chat == 1)
            that.allowChat = true
          else
            that.allowChat = false
        })
        .catch(function(err){console.log(err)});
        // 获取用户图片
        http.get(that.getPicturesUrl,{   
          params:{
            where:[
              {key:'picture_user_id',where:'=',value:user_id}
            ],
            page:that.page,
            pageNumber:that.pageNumber
          }      
        })
        .then(function(response){
          that.pictures = response.data.data;
        })
        .catch(function(err){console.log(err)});
      },
      //封号与解封
      banUser: function(){
        var that = this
        var status = 0
        if(that.user.user_status == 0){
          status = 1
        }else if(that.user.user_status == 1){
          status = 0
        }
        http.post(that.banUserUrl,{
          user_id:that.user.user_id,
          user_status:status,
        })
        .then(function(response){
          if(response.data.code == 200){

            that.user.user_status = status
          }
        })
        .catch(function(err){console.log(err)});
      },
      //修改用户
      updateUser: function(){
        var that = this

        if(this.allowChat)
          this.user.user_allow_chat = 1
        else
          this.user.user_allow_chat = 0
        var user_data = {
          user_thumbnail:this.user.user_thumbnail,
          user_name:this.user.user_name,
          user_nickname:this.user.user_nickname,
          user_sex:this.user.user_sex,
          user_password:this.user.user_password,
          user_wechat_id:this.user.user_wechat_id,
          user_mobile_phone:this.user.user_mobile_phone,
          user_province:this.user.user_province,
          user_city:this.user.user_city,
          user_money:this.user.user_money,
          user_rank_number:this.user.user_rank_number,
          user_allow_chat:this.user.user_allow_chat,
          user_type:this.user.user_type
        }
        console.log(user_data)
        let param = new FormData(); 
        param.append('user_data',user_data);
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };  //添加请求头
        http.put(that.updateUserUrl+'/'+this.user.user_id,{
          user_data:user_data
        })
        .then(function(response){
          // that.showToast();
          console.log(response)
        })
        .catch(function(err){console.log(err)});
      }
    },
    mounted() {
      this.getPictures();
    },
  }
</script>

<style lang="css" scode>

.user-box{
  padding:20px 30px 10px 30px;
}
.col{
  padding:15px;
}
.checkbox {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  margin-right: 10px;
}
.mu-checkbox-svg-icon{
  width:35px;
  height:35px;
  margin-top: -5px;
}
.bd-radius{
  border-radius: 11px;
}
.showNum{
  width: 50px;
}
.gutter-right-item{
  float: right;
}
.refresh-box{
  display: inline-block;
  position: relative;
}
.refresh{
  position: absolute;
  z-index: 6;
  top:4px;
  left: 32px;
  background: 
}
.picture-list-box .col{
  padding:0px;
}
.user-name{
  padding-top:10px;
  font-size: 24px;
  color: #9CA3CD;
}
.user-wxh{
  line-height: 40px;
  font-size: 16px;
}
.user-btn{
  padding-top:30px;
}
/*资料信息弹窗*/
.user-message-box{
  height: 400px;
  overflow-y: auto;
}
.box{
  padding:40px;
}
.head-box{
  margin: 0 auto;
  display: flex;
}
.head-box span{
  margin:25px 30px; 
  font-size: 30px;
  color:#E1E1E1;
}
.divider-form {
  width: 100%;
  margin-bottom: 0;
  /*padding-left: 20px;*/
}
.divider-form input{
  width: 100%;
}
.divider-sex{
  height:48px;
}
.switch-box{
  padding:15px 20px;
}
.button{
  width: 100%;
  background: #03a9f4;
}
</style>